☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Working with Lists

20-01-18 Course- HTML5-Simple

Hyper Text Markup Language (HTML) allows you to present the content on a Web page in various formats, such as lists, tables, and frames. Lists is a collection of similar items under a common group or category. In HTML, there are three different types of lists: ordered, unordered, and definition. Each member of the ordered list is marked with a numeral or letter; whereas, an unordered list is a bulleted list of items. A definition list can be defined as a list of terms and their definitions.

Apart from the lists, HTML 5 also provides the facility to arrange the data in a tabular format. This implies that you can create a table of data items and in turn organize the dispersed data in a single place. For example, you are provided with student record in which there are various fields, such as student name, date of birth, address, and phone number, which is in an unorganized way. You have been asked to organize the data, so that the record when posted on a Web page is easy to understand. Therefore, you make a proper arrangement of student record and organize them in the form of a table.

In HTML, frames are used to view multiple Web pages in a same browser. Frames divide a window into various vertical and horizontal sections so that you can view multiple Web pages in different frames at a time.

In this section, you learn to work with lists.

Working with Lists

If you want to group a large number of items together, you can create lists of those items. The items inside a list are known as list elements. All the lists must contain one or more list elements. A list can be an unordered list, an ordered list, or a definition list. If you want to create a list of items in a bulleted form, then you create an unordered list. To create a list of items in alphabetical, in alphabetical, numerical, or roman numerical form, you can create an ordered list. Moreover, if you want to create a list of items in the form of a term and its description, then you can create a definition list. You can also customize the unordered and ordered lists. In addition to this, you can also create nested lists.

In this section, you learn about creating an unordered and ordered list. In addition to this, you also learn about the definition list and the nested list.

Creating an Unordered List

An unordered list is used to create a bulleted list of items. To display the list of items in the bulleted format, you can use the <ul> tag and the <li> tag. The <ul> tag is used to define an unordered list; whereas, the <li> tag is used to define the items of the list

Let’s perform the following steps to create an unordered list:


<!DOCTYPE html>
<head>
<title>Commenting text</title>
</head>
<body bgcolor=”#F6CEF5”>
    <h2 align=”center”> Creating an unordered List </h2>
    <h4> List of Mobile Brands </h4>
    <ul>
        <li>Apple</li>
        <li>Microsoft</li>
        <li>Google</li>
    </ul>
    <h4> List of vegetables</h4>
    <ul>
        <li>Onion</li>
        <li>Capsicum</li>
        <li>Brinjal</li>
    </ul>

</body>
</html>

Save the document with the name UnorderedList.html.

Creating an Ordered List

An ordered list displays a list of items using numbers or letters in either ascending or descending order. To create an ordered list of items, you can use the <ol> tag and the <li> tag. The <ol> tag is used to define an ordered list; whereas, the <li> tag is used to define the define the items of the list.

Prior to HTML 5, the start attribute of the <ol> tag was deprecated. The start attribute starts the list with the number specified in the start attribute value, however, in HTML 5, this attribute has been provided full support. Along with this attribute, HTML 5 has introduced one attribute known as reversed, which is used to reverse the count. The reversed attribute is generally used for rankings or countdowns, such as ranking a list of items in descending order.

Let’s do the following steps to create an ordered list:


<!DOCTYPE html>
<head>
<title>An ordered List</title>
</head>
<body bgcolor=”#F6CEF5”>
    <h2 align=”center”> Creating an ordered List </h2>
    <h4> List of Mobile Brands </h4>
    <ol>
        <li>Apple</li>
        <li>Microsoft</li>
        <li>Google</li>
    </ol>
    <h4> List of vegetables</h4>
    <ol>
        <li>Onion</li>
        <li>Capsicum</li>
        <li>Brinjal</li>
    </ol>
    <ol reversed=”reversed”>
        <li> Hello !! How are you?
        <li> Have you seen a List of Fruits and Vegetables?
        <li> good………….You learn more……………
    </ol>
</body>
</html>

Save the document with the name OrderList.html and open in browser.

Note: by defulat. An ordered list shows the list items in ascending order.

Creating a Definition List

A definition list is a list of terms and their corresponding definitions. You can create a definition list by using the <dl> tag and items in the definition list with the <dt> and <dd> tags. The <dt> tag is used to define the term; whereas, the <dd> tag is used to give the term’s definition. The <dl>, <dt>, and <dd> tags refer to definition list, definition term, and definition description, respectively.

Let’s perform the following steps to create a definition list:


<!DOCTYPE html>
<head>
<title>A Definition List</title>
</head>
<bode>
    <h2 align=”center”> Creating a Definition List</h2>
    <h3> Listing the name and address of students</h3>
    <dl>
        <dt>
            <h4>Charls Bean </h4>
            <dd> 44, Scotland, UK</dd>
        </dt>
        <dt>
            <h4>Mani Dubey </h4>
            <dd> 54, New Delhi, India</dd>
        </dt>
        <dt>
            <h4>Kr Sandy </h4>
            <dd>L-104, Punjab, India</dd>
        </dt>
    </dl>

</body>
</html>

Nested Lists

Sometimes, you may come across a situation where one or more items in a list contain sub items. In such a situation, you can create a nested list, where you can display a list in an hirachal way. In order words, nested list means to put one list (child) inside another list (parent).

Let’s go through the following steps to do the nesting of lists:


<!DOCTYPE html>
<head>
<title>Nesting Lists</title>
</head>
<bode>
    <h2 align=”center”> Creating a Nesting Lists</h2>
    <h3> Listing is a List of Students</h3>
    <ul>
        <li>Mukesh Kumar
    <ul>
        <li>Passed 10th in 1999</li>
        <li>Passed 12th in 2001</li>
        <li>Passed BCAth in 2004</li>
        <li>Passed MCAth in 2007</li>
    </ul>
</li>
<li> Rajesh Kumar</li>
<li> John Renaldo</li>
<li> Avinash Goenk</li>
    </ul>

</body>
</html>

Now, let’s learn how to work with tables. Go through Next Button

PRV MENU NEXT